.tongji-container {
    width: 100%;
    padding: 20px;
  }
  
  .top-filter {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
  
    select {
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      margin-right: 10px;
    }
  
   .query-button,
   .reset-button {
      padding: 6px 12px;
      border: none;
      border-radius: 4px;
      color: white;
      cursor: pointer;
    }
  
   .query-button {
      background-color: #007bff;
    }
  
   .reset-button {
      background-color: #6c757d;
    }
  }
  
  .statistic半圆 {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
  
   .statistic-item {
      width: 20%;
      height: 150px;
      background-color: #007bff;
      border-radius: 50% 50% 0 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 24px;
  
      span:first-child {
        margin-bottom: 10px;
      }
    }
  }
  
  .bottom-filter {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
  
    input {
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      margin-right: 10px;
    }
  
    select {
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      margin-right: 10px;
    }
  
   .query-button,
   .reset-button {
      padding: 6px 12px;
      border: none;
      border-radius: 4px;
      color: white;
      cursor: pointer;
    }
  
   .query-button {
      background-color: #007bff;
    }
  
   .reset-button {
      background-color: #6c757d;
    }
  }
  
  .echarts-chart {
    width: 100%;
    height: 400px;
  }